<template>
    <div class="app">
        <div class="header banner tanxin">
            <ul class="header-c tanxin">
                <li>
                    <h1></h1>
                </li>
                <li @click="$router.push('/')" :class="{ active: $route.path === '/' || $route.path === '/home'}">发现音乐</li>
                <li @click="$router.push('/personmusic')" :class="{active: $route.path === '/personmusic'}">我的音乐</li>
                <li @click="$router.push('/guanzhu')" :class="{active: $route.path === '/guanzhu'}">关注</li>
                <li @click="$router.push('/shangcheng')" :class="{active: $route.path === '/shangcheng'}">商城</li>
                <li @click="$router.push('/yinyueren')" :class="{active: $route.path === '/yinyueren'}">音乐人</li>
                <li @click="$router.push('/xiazai')" :class="{active: $route.path === '/xiazai'}">下载客户端<span></span></li>
            </ul>
            <div class="serch">
                <span>
                    <input type="text" placeholder="音乐/视频/电台/用户">
                </span>
            </div>
            <div class="serch-r">创作者中心</div>
            <div class="login login-btn" @click="login">登录</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loginStatus: true
        };
    },
    methods: {
        login() {
            this.$store.commit("unloginShow", true);
        },
    },
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.active {
    background-color: #000;
}
.app {
    background: #242424;

    .header {
        height: 70px;
        box-sizing: border-box;
        border-bottom: 1px solid #000;
        .header-c {
            color: #fff;
            cursor: pointer;

            li {
                padding: 0 12px;
                line-height: 70px;
            }
            li:hover {
                background-color: black;
            }
            li:first-child {
                font-size: 25px;
                background-color: #242424;
                h1 {
                    width: 165px;
                    height: 70px;
                    background: url('../assets/images/topbar.png') no-repeat;
                }
            }
            li:last-child {
                span {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    margin-left: 10px;
                    background: url(../assets/images/topbar.png) no-repeat;
                    background-position: -195px 0;
                }
            }
        }

        .serch {
            height: 32px;
            margin-left: 40px;
            cursor: pointer;

            input {
                height: 32px;
                border-radius: 20px;
                text-align: center;
                line-height: 32px;
            }
        }

        .serch-r {
            height: 34px;
            border-radius: 20px;
            text-align: center;
            line-height: 32px;
            color: #fff;
            border: 1px solid #ccc;
            padding: 0 20px;
            margin-left: 15px;
            box-sizing: border-box;
            cursor: pointer;
            font-size: 14px;
        }

        .serch-r:hover {
            border: 1px solid #fff;
        }

        .login {
            margin-left: 25px;
            color: #fff;
            cursor: pointer;
        }
    }
}
</style>